<template>
  <div>
    <table>
      <tbody>
        <!-- <mwl-cmp v-for="(item, index) in goodsArr" :key="index" :item="item" /> -->
        <tr
          is="mwl-cmp"
          v-for="(item, index) in goodsArr"
          :key="index"
          :item="item"
        ></tr>
      </tbody>
    </table>
    <p>All Number: {{ total }}</p>
  </div>
</template>

<script>
import MwlCmp from './mwl_cmp.vue'
export default {
  name: 'Mwl',
  components: {
    MwlCmp,
  },
  data() {
    return {
      goodsArr: [
        {
          count: 0,
          goodsName: 'Watermelon',
        },
        {
          count: 0,
          goodsName: 'Banana',
        },
        {
          count: 0,
          goodsName: 'Orange',
        },
        {
          count: 0,
          goodsName: 'Pineapple',
        },
        {
          count: 0,
          goodsName: 'Strawberry',
        },
      ],
    }
  },
  computed: {
    total() {
      return this.goodsArr.reduce((acc, cur) => acc + +cur.count, 0)
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {},
}
</script>

<style lang="less" scoped></style>
